<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <div class="img-box">
      <ul class="left-box">
        <template v-for="(item, index) in list">
          <li v-if="index % 2 == 0" :key="item.proid">
            <img :src="item.img1" />
            <p>{{ item.proname }}</p>
            <p>¥:{{ item.originprice }}</p>
          </li>
        </template>
      </ul>
      <ul class="right-box">
        <template v-for="(item, index) in list">
          <li v-if="index % 2 != 0" :key="item.proid">
            <img :src="item.img1" />
            <p>{{ item.proname }}</p>
            <p>¥:{{ item.originprice }}</p>
          </li>
        </template>
      </ul>
    </div>
  </van-list>
</template>

<script>
export default {
  name: "GoodsList",
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
    };
  },
  created() {
    let xhr = new XMLHttpRequest();
    xhr.open("get", "http://localhost:3000/goodslist");
    xhr.onreadystatechange = () => {
      if (xhr.readyState == 4 && xhr.status == 200) {
        let data = JSON.parse(xhr.responseText);
        if (data.code == 200) {
          this.list = data.data;
        }
      }
    };
    xhr.send();
  },
  onLoad() {
    console.log("onLoad");
  },
};
</script>

<style scoped>
.img-box {
  display: flex;
}

.left-box,
.right-box {
  width: 50%;
}

img {
  width: 100%;
  height: 20rem;
}
</style>